<h1><%= @store.name %></h1>
<p><%= @store.description %></p>
<h3>Click on a product to remove it from this store.</h3>
<div id="store_products">
    <% for product in @store.products %>
        <div class="store_thumb" id="store_product_<%= product.id %>" style="background: url(<%= product.image %>) center;"></div>
    <% end %>
</div>
<div class="clear"></div>
<hr />
<h3>Click on a product to add it to this store.</h3>
<div id="products">
    <% for product in @products %>
        <div class="product_thumb" id="product_<%= product.id %>" style="background: url(<%= product.image %>) center;"></div>
    <% end %>
</div>
<div class="clear"></div>

<%= javascript_include_tag "lowpro.js" %>

<script type="text/javascript">
    var store_product_thumb = new Template("<div class='store_thumb' id='store_#{id}' style='#{style}'></div>");
    
    Event.addBehavior({
        '.product_thumb:click' : function(ev) {
            e = Event.element(ev);
            new Ajax.Request('/stores/add_product/', {
                method: 'post',
                parameters: {
                    store_id: <%= @store.id %>,
                    product_id: e.readAttribute("id").gsub("product_", "")
                },
                onSuccess: function(transport) {
                    $("store_products").insert(store_product_thumb.evaluate({
                        id: e.readAttribute("id"),
                        style: e.readAttribute("style")
                    }));
                }
            })
        },
        '.store_thumb:click' : function(ev) {
            e = Event.element(ev);
            new Ajax.Request('/stores/remove_product/', {
                method: 'post',
                parameters: {
                    store_id: <%= @store.id %>,
                    product_id: e.readAttribute("id").gsub("store_product_", "")
                },
                onSuccess: function(transport) {
                    e.remove();
                }
            })
        }
    });
</script>